<template>
  <section class="intelligent-content-bg overflowYAll">
    <div class="intelligent-content-box">
      <!-- 总量统计表 -->
      <el-table
        :data="totalTable"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#cae4fe',color: '#000'}"
        :cell-style="{border:'none'}"
      >
        <el-table-column prop="serviceAllCount" label="接入种类总数" align="center"></el-table-column>
        <el-table-column prop="orgAllCount" label="接入单位总数" align="center"></el-table-column>
        <el-table-column prop="allCount" label="接入总量" align="center"></el-table-column>
        <el-table-column prop="serviceThisMonthCount" label="本月接入数" align="center"></el-table-column>
        <el-table-column prop="orgThisMonthCount" label="本月接入单位数" align="center"></el-table-column>
        <el-table-column prop="thisMonthCount" label="本月接入数据量" align="center"></el-table-column>
        <el-table-column prop="thisWeekCount" label="本周接入数据量" align="center"></el-table-column>
        <el-table-column prop="todayCount" label="本日接入数据量" align="center"></el-table-column>
      </el-table>
      <hr>
      <!-- 图标组件 -->
      <div>
        <statistical-table :columnName='columnName' :columnData='columnData'></statistical-table>
      </div>
      <!-- 详细统计表 -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#cae4fe',color: '#000'}"
        :cell-style="{border:'none'}"
      >
        <el-table-column prop="name" label="服务名称" align="center"></el-table-column>
        <el-table-column prop="orgName" label="数据来源（所属部门）" align="center"></el-table-column>
        <el-table-column prop="allCount" label="采集数据总量" align="center"></el-table-column>
        <el-table-column prop="thisMonthCount" label="本月采集" align="center"></el-table-column>
        <el-table-column prop="thisWeekCount" label="本周采集" align="center"></el-table-column>
        <el-table-column prop="todayCount" label="本日采集" align="center"></el-table-column>
      </el-table>
      <p style="margin-top: 15px;">
        <el-pagination
          :total="pageTotal"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="10"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </p>
    </div>
  </section>
</template>

<script>
import statisticalTable from "../components/statisticalTable.vue";
import {
  collectServiceStatisticsDetail,
  collectServiceStatisticsTotalController,
  dataForEchartsController
} from "../css_js_img/statisticalMonitotingController";
export default {
  components: {
    statisticalTable
  },
  data() {
    return {
      tableData: [], //类型列表
      totalTable: [], // 总数表的数据
      columnName:[],
      columnData:[],
      selectedType: "requester",
      pageNum: 1,
      pageTotal: 10
    };
  },
  mounted() {
    console.log("初始化执行.....");
    collectServiceStatisticsDetail(this, this.pageNum);
    // 初始化总量统计表
    collectServiceStatisticsTotalController(this);
    // 初始化图表信息
    dataForEchartsController(this);
    
  },
  methods: {
    handleCurrentChange(param) {
      collectServiceStatisticsDetail(this, this.pageNum);
    },
    columnNameFun(){
      return this.columnName
    },
  }
};
</script>